<template>
  <div class="clearfix">
    <div class="fl mr30" style="width:166px;">
      <img v-if="!dialogImageUrl" width="146" height="120" src="../../assets/images/up_data_img.png" alt="">
      <img v-else :src="dialogImageUrl" width="146" height="120" style="display: block" alt="">
    </div>
    <div class="fl mr30">
      <div>
        <label class="sentimg">
          <input type="file" name="image_file" @change="sendData($event)">
        </label>
      </div>
    </div>
  </div>
</template>

<script>
  import api from '../../assets/js/api';
  export default {
    name: "up-doll-img",
    data() {
      return {
        imgurl: '',
        fdata: new FormData(),
        imgData: null,
        is_show: false,
        dialogImageUrl: '',
        dialogVisible: false
      };
    },
    props: ['tr_data'],
    mounted: function () {
      this.ready();
    },
    methods: {
      ready: function () {
        this.dialogImageUrl = this.tr_data.detail_image;
      },
      sendData: function (file) {
        this.dialogImageUrl = getObjectURL(file.target.files[0]);
        function getObjectURL(imgobj) {
          var url = null;
          if (window.createObjectURL != undefined) {
            url = window.createObjectURL(imgobj)
          } else if (window.URL != undefined) {
            url = window.URL.createObjectURL(imgobj)
          } else if (window.webkitURL != undefined) {
            url = window.webkitURL.createObjectURL(imgobj)
          }
          return url
        };
        this.fdata.append("detail_image_file", file.target.files[0]);
        api.fetch('/api/admin/machines/' + this.tr_data.id, {
          method: 'post',
          data: this.fdata
        })
          .then(res => {
            this.$message({
              message: '上传成功',
              type: 'success'
            });
          }).catch();
      }
    }
  }
</script>

<style scoped>
  .clearfix {
    padding: 15px 0;
  }

  .clearfix .fl {
    line-height: 120px;

  }

  .sentimg {
    width: 120px;
    height: 120px;
    background: #f5f5f5;
    display: block;
    overflow: hidden;
    position: relative;
  }

  .sentimg input {
    opacity: 0;
  }

  .sentimg:after {
    content: '';
    display: block;
    width: 30px;
    height: 2px;
    background: #555;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -15px;
    margin-top: -1px;
  }

  .sentimg:before {
    content: '';
    display: block;
    height: 30px;
    width: 2px;
    background: #555;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -15px;
    margin-left: -1px;
  }
</style>
